<template>
  <div>
    <Header/>

    <div class="content clearfix">
      <!--个人信息-->
      <div class="user-head">
        <div class="user-head-left fl">
          <div class="user-head-img">
            <img :src="headerSrc" alt="">
          </div>

          <p>
            <input @change="upload" style="display: none" accept="image/*" id="headerImg" type="file"/>
            <label for="headerImg" style="cursor: pointer; color: blue">
              上传头像
            </label>
          </p>
        </div>
        <div class="user-head-right fl">
          <ul class="user-head-name fl">
            <li><b>{{ user.name }}</b></li>
            <li>{{ user.phone }}</li>
            <li>最近登录：{{ user.lastLoginTime }}</li>
          </ul>
          <div class="user-head-money fr">
            <p>可用余额：<span>￥{{ user.account.availableMoney | formatMoney }}元</span></p>
            <a href="javascript:;" @click="$router.push('/pay')" class="user-head-a1">充值</a>
            <a href="javascript:;" @click="$router.push('/index')" class="user-head-a2">投资</a>
          </div>
        </div>

      </div>
      <!--记录-->
      <div class="user-record-box clearfix">
        <div class="user-record user-record-1">
          <h3 class="user-record-title">最近投资</h3>
          <table v-if="recentRes.length" align="center" width="388" border="0" cellspacing="0" cellpadding="0">
            <thead class="datail_thead">
            <tr>
              <th>序号</th>
              <th>投资产品</th>
              <th>投资金额</th>
              <th>投资时间</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(r,i) in recentRes">
              <td>{{ i+1 }}</td>
              <td>{{ r.product.productName }}</td>
              <td>{{ r.bidMoney }}</td>
              <td>{{ r.bidTime | formatDate("yyyy-MM-dd") }}</td>
            </tr>
            </tbody>
          </table>
          <!--无记录-->
          <p v-else class="user-record-no">还没有投资记录，请投资：<a href="user_center.html" target="_blank">投资</a></p>
        </div>
        <div class="user-record user-record-2">
          <h3 class="user-record-title">最近充值</h3>
          <table align="center" width="388" border="0" cellspacing="0" cellpadding="0">
            <thead class="datail_thead">
            <tr>
              <th>序号</th>
              <th>充值描述</th>
              <th>充值金额</th>
              <th>充值时间</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>1</td>
              <td>新手宝</td>
              <td>1500.0</td>
              <td>2021-08-19</td>
            </tr>
            <tr>
              <td>2</td>
              <td>新手宝</td>
              <td>1500.0</td>
              <td>2021-08-19</td>
            </tr>
            <tr>
              <td>3</td>
              <td>新手宝</td>
              <td>1500.0</td>
              <td>2021-08-19</td>
            </tr>
            <tr>
              <td>4</td>
              <td>新手宝</td>
              <td>1500.0</td>
              <td>2021-08-19</td>
            </tr>
            <tr>
              <td>5</td>
              <td>新手宝</td>
              <td>1500.0</td>
              <td>2021-08-19</td>
            </tr>
            <tr>
              <td>6</td>
              <td>新手宝</td>
              <td>1500.0</td>
              <td>2021-08-19</td>
            </tr>
            </tbody>
          </table>
          <!--无记录-->
          <p class="user-record-no">还没有充值记录，请充值：<a href="user_pay.html" target="_blank">充值</a></p>
        </div>
        <div class="user-record user-record-3">
          <h3 class="user-record-title ">最近收益</h3>
          <table align="center" width="388" border="0" cellspacing="0" cellpadding="0">
            <thead class="datail_thead">
            <tr>
              <th>序号</th>
              <th>项目名称</th>
              <th>投资日期</th>
              <th>收益金额</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>1</td>
              <td>新手宝</td>
              <td>2021-08-19</td>
              <td>0.46</td>
            </tr>
            <tr>
              <td>2</td>
              <td>新手宝</td>
              <td>2021-08-19</td>
              <td>0.46</td>
            </tr>
            <tr>
              <td>3</td>
              <td>新手宝</td>
              <td>2021-08-19</td>
              <td>0.46</td>
            </tr>
            <tr>
              <td>4</td>
              <td>新手宝</td>
              <td>2021-08-19</td>
              <td>0.46</td>
            </tr>
            <tr>
              <td>5</td>
              <td>新手宝</td>
              <td>2021-08-19</td>
              <td>0.46</td>
            </tr>
            <tr>
              <td>6</td>
              <td>新手宝</td>
              <td>2021-08-19</td>
              <td>0.46</td>
            </tr>
            </tbody>
          </table>
          <!--无记录-->
          <p class="user-record-no">还没有收益记录</p>
        </div>

      </div>


    </div>

    <Footer/>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Index from "@/views/Index";

import filters from "@/utils/filters";
import Vue from "vue";

export default {
  name: "UserCenter",
  filters,
  data() {
    return {
      headerSrc: JSON.parse(sessionStorage.getItem("loginUser")).headerImage || "/image/user-head.png",
      user: JSON.parse(sessionStorage.getItem("loginUser")),
      recentRes: []
    }
  },
  methods: {
    upload() {
      let input = document.getElementById("headerImg");
      let file = input.files[0]

      let param = new FormData()       // 创建form对象
      param.append('headImage', file)       // 通过append向form对象添加数据
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }
      this.axios.post("/user/upload", param, config).then(({data}) => {
        this.headerSrc = data;

        let user = JSON.parse(sessionStorage.getItem("loginUser"))
        user.headerImage = data;
        sessionStorage.setItem("loginUser", JSON.stringify(user))
      })
    }
  },
  components: {
    Index, Footer, Header
  },
  created() {
    Vue.axios.get("/user/recentRec").then(resp => {
      console.log(resp.data);
      this.recentRes = resp.data
    })
  }
}
</script>

<style scoped>

</style>